<template>
	<view class="container">

		<view class="cu-list menu-avatar bg-gradual-blue">
			<view class="cu-item margin-top" style="background:none;">
				<view @click="$util.redirectTo('/pages/shop/my/my_info')" class="cu-avatar round lg"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);">
				</view>
				<view @click="$util.redirectTo('/pages/shop/my/my_info')" class="content flex-sub">
					<view class="text-bold text-blod">游客</view>
					<view class="flex margin-top-sm">
						<view class="cu-tag bg-red light sm round">黄金v3</view>
						<view class="cu-tag bg-green light sm round">开通会员</view>
					</view>
				</view>
				<view>
					<text class="cuIcon-friendadd size-42 text-white"></text>
					<text @click="$util.redirectTo('/pages/shop/child/setting')" class="cuIcon-settings size-42 text-white margin-left-xs"></text>
				</view>
			</view>
			<view>
				<cu-grid-text cols="4" :datas="navbar" @onchange="onSelectOrder"></cu-grid-text>
			</view>
		</view>
		<view class="padding-lr padding-top-sm padding-bottom-sm bg-white">
			<view class="cu-card bg-gradual-red round">
				<view class="grid col-3 text-center padding-sm">
					<view>
						<view>红包签到</view>
						<view>天天领取></view>
					</view>
					<view>
						<view>会员中心</view>
						<view>积分兑换></view>
					</view>
					<view>
						<view>品牌特卖</view>
						<view>限时抢购></view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex justify-between padding-sm bg-white solid-bottom">
			<view class="text-black text-size-32 text-bold">我的订单</view>
			<view @click="onAllOrder" class="text-gray text-size-12">查看全部</view>
		</view>
		<cu-grid cols="5" :datas="menus" @onchange="onSelectOrder"></cu-grid>
		<view class="flex justify-between padding-sm ">
			<view class="text-black text-size-32 text-bold">我的工具</view>
			<view class="text-gray text-size-12">查看全部</view>
		</view>
		<view class="padding-sm">
			<view class="cu-card bg-white radius">
				<view class="grid col-2 text-center padding-sm">
					<view class="flex justify-center align-center padding-sm" v-for="(item,index) in tools"
						:key="index">
						<view>
							<view class="text-size-32 text-blod text-black">{{item.name}}</view>
							<view class="margin-top-xs">天天领取</view>
						</view>
						<view class="cuIcon-add size-50 margin-left-sm"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="text-center padding-sm">
			<text class="text-size-32 text-red text-blod">推荐商品</text>
		</view>
		<cu-grid-media cols="2" :datas="goods"></cu-grid-media>
		<view style="height: 100rpx;"></view>
		<cu-navbar selectIndex="4" :isBottom="true"></cu-navbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	//footer
	import cuNavbar from '@/components/diy/footer/cu-navbar.vue';
	import cuGrid from '@/components/diy/list/cu-grid.vue';
	import cuGridText from '@/components/diy/list/cu-grid-text.vue';
	import cuGridMedia from '@/components/diy/list/cu-grid-media.vue';
	export default {
		computed: {
			...mapState(['hasLogin', 'forcedLogin', 'userinfo'])
		},
		components: {
			cuNavbar,
			cuGrid,
			cuGridMedia,
			cuGridText
		},
		data() {
			return {
				tools: [{
					name: '每日抽奖',
					color: 'red',
					cuIcon: 'btn'
				}, {
					name: '今日签到',
					color: 'red',
					cuIcon: 'btn'
				}, {
					name: '我的发布',
					color: 'red',
					cuIcon: 'btn'
				}, {
					name: '我的店铺',
					color: 'red',
					cuIcon: 'btn'
				}, {
					name: '客户服务',
					color: 'red',
					cuIcon: 'btn'
				}, {
					name: '会员服务',
					color: 'red',
					cuIcon: 'btn'
				}],
				menus: [{
						name: '待付款',
						color: 'red',
						cuIcon: 'btn'
					},
					{
						name: '待发货',
						color: 'red',
						cuIcon: 'btn'
					},
					{
						name: '待收货',
						color: 'red',
						cuIcon: 'btn'
					},
					{

						name: '待评价',
						color: 'red',
						cuIcon: 'btn'
					},
					{

						name: '退款/售后',
						color: 'red',
						cuIcon: 'btn'
					} 
				],
				navbar: [{
						value: 11,
						name: '我的收藏',
						color: 'red',
						path:'/pages/shop/child/collect'
					},
					{
						value: 9,
						name: '我的关注',
						color: 'red',
						path:'/pages/shop/child/concern'
					}, {
						value: 123,
						name: '访问足迹',
						color: 'red',
						path:'/pages/shop/child/footprint'
					}, {
						value: 5,
						name: '红包卡卷',
						color: 'red',
						path:'/pages/shop/child/coupon'
					}

				],
				goods: this.$mock.goods
			}
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			},
			onAllOrder: function(e) {
				this.$util.redirectTo('/pages/shop/order/index')
			},
			onSelectOrder: function(e) {
				console.log(e)
				if (e == 4) {
					this.$util.redirectTo('/pages/shop/aftersale/index');
					return;
				}
				this.$util.redirectTo('/pages/shop/order/index', {
					type: e
				});
			}
		}
	}
</script>

<style scoped>

</style>
